<template>
	<view class="box list-box">
		<view class="item" v-for="(item,index) in list" @click='goDetails(item.id)'>
			<view class="h1">
				{{item.name}}  
				<view class="span" :class="{off:item.status==2}">{{item.status==1?'进行中':'已结束'}}</view>
			</view>
			<view class="text">
				<view class="image">
					<image v-if="item.productInfo" :src="item.productInfo[0].image" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="cyrs">
						<view class="l">
							<up-avatar-group
							            :urls="item.joinUserList.map((it)=>it.userInfo.avatar)"
							            size="40rpx"
							            gap="0.4"
							    ></up-avatar-group>
							<view class="span">
								已参与：<view class="em">{{item.lottery_num}}人</view>
							</view>
						</view>
						<button class="r">
							<image :src="`${$imgurl}/static/icon-share.png`" mode=""></image> {{item.share}}
						</button>
					</view>
					<view class="bottom">
						<view class="r">
							<view class="initiator">
								发起者：{{!item.userInfo?'平台创建':item.userInfo?.nickname}}
							</view>
							<view class="stock" v-if="!item.is_join">
								<view class="time">
									剩余{{item.product_num-item.over_num}}件礼物
								</view>
								<!-- @click.stop="onAnswer(item.id)" -->
								<view class="btn"  :style="`background: url(${$imgurl}/static/icon-cj-bg.png) no-repeat; background-size: 100% 100%;`">
									立即抽奖
								</view>
							</view>
							<view class="cy" v-else>
								我已参与
							</view>
						</view>
						
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	let props = defineProps({
			list:{
				type:Array,
				default:[]
			}
		});
	const goDetails=(id)=>{
		uni.navigateTo({
			url:'/pages/lottery/details?id='+id
		})
	}
</script>

<style lang="scss" scoped>
	.list-box{
		height:100%;
		.item{
			background: #fff;
			border-radius: 20rpx;
			padding:24rpx;
			margin-bottom: 16rpx;
			.h1{
				line-height: 1;
				font-weight: bold;
				display: flex;justify-content: space-between;
				align-items: center;
				line-height: 52rpx;
				.span{
					background-color: #FFF4F2;
					border-radius: 8rpx;
					line-height: 52rpx;
					padding:0 16rpx;
					font-weight: initial;
					color:#FF401A;
					font-size:24rpx;
					&.off{
						color:#838A99;
						background-color: #F5F6FA;
					}
				}
			}
			.text{
				margin-top:20rpx;
				display: flex;
				.image{
					width:184rpx;height:184rpx;
					border-radius: 12rpx;
					overflow: hidden;
					position: relative;
					image{
						width:100%;height:100%;display: block;
					}
					.icon{
						position: absolute;top:0;left:0;
						width:32rpx;height:32rpx;
					}
				}
			}
			.right{
				flex:1;
				margin-left:20rpx;
				.cyrs{
					display: flex;align-items: center;
					justify-content: space-between;
					.l{
						display: flex;
						.span{
							margin-left:12rpx;
							display: flex;font-size: 24rpx;
							color:#838A99;
							.em{
								color:#FF401A;
							}
						}
					}
					.r{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color:#A8A8A8;
						margin:0;
						padding:0;
						line-height: 1;
						background:initial;
						image{
							width:28rpx;height:28rpx;margin-right:8rpx;
						}
					}
				}
				.bottom{
					display: flex;
					color:#AEAEAE;
					font-size:24rpx;
					margin-top:28rpx;
					line-height: 1;
					align-items: center;
					justify-content: space-between;
					.r{flex:1}
					.stock{
						margin-top:	24rpx;
						color:#8D33FF;
						display: flex;justify-content: space-between;
						height:64rpx;
						align-items: center;
						background-color: #FEF0FF;
						border-radius: 12rpx;
						padding-left:16rpx;
						.h{
							color:#AEAEAE;
						}
						.time{
							display: flex;
							align-items: center;
							::v-deep{
								.u-count-down__text{
									color:#F5493D;line-height: 1;font-size:24rpx;
								}
							}
						}
						
					}
					.cy{
						margin-top:24rpx;
					}
					.btn{
						padding-left:44rpx;
						width:164rpx;
						box-sizing: border-box;
						font-size: 26rpx;
						color:#fff;
						background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
						line-height: 64rpx;
					}
				}
			}
		}
	}
</style>